<!--
 * @Descripttion: 
 * @Copyright: 武汉一一零七科技有限公司©版权所有
 * @Link: 1074699502@qq.com
 * @Contact: QQ:1074699502
 * @LastEditors: wzb
 * @LastEditTime: 2020-10-25 21:23:22
-->
<template>
<div>
    <div class="animation" :style="{background:isShowBg?bgColor:''}">
        <span class="ele"></span>
        <span class="ele"></span>
        <span class="ele"></span>
    </div>
</div>
</template>

<script>
export default {
    props: {
        isShowBg: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            bgColor: 'linear-gradient(to right, #ffa468, #fa3f3f)'
        }
    }
}
</script>

<style lang="scss">
@import '@/static/css/mixins.scss';

.animation {

    @include flexbox($jc:space-around);

    width: 24upx;
    height: 22upx;
    /*  #ifdef  MP-WEIXIN  */
    width: 40upx;
    height: 27upx;
    /*  #endif  */
    border-radius: 100px;
    padding: 4upx 8upx;
    margin-right: 4upx;
    border-top-right-radius: 20upx;

    .ele {
        height: 100%;
        width: 5upx;
        border-radius: 4upx;

        background-color: #fff;
        display: inline-block;

        &:nth-child(1) {
            animation: liveAnimation 1.5s linear 0.3s infinite;
        }

        &:nth-child(2) {
            animation: liveAnimation 1.5s linear 0.5s infinite;
        }

        &:nth-child(3) {
            animation: liveAnimation 1.5s linear 0.1s infinite;
        }
    }
}

@keyframes liveAnimation {
    0% {
        height: 0%;
    }

    50% {
        height: 100%;
    }

    100% {
        height: 0%;
    }
}
</style>
